<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= __('hy') %></title>
    <link href="/image/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_607959_8t0w2txptnj.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_538230_hp0r91q784c84cxr.css">
    <link rel="stylesheet" href="/mcss/base.css">
    <link rel="stylesheet" href="/mcss/personal.css">
    <link rel="stylesheet" href="/mcss/userInfo.css">
    <link rel="stylesheet" href="/mcss/loading.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.3.4/cropper.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <%- include('base/mheader'); %>
    <div class="personal">
        <div class="loading" v-show="!loading">
                    <div class="preloader_4">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
        <div class="growth-top">
            <%- include('base/muserInfo'); %>
            <%= __('personalInformation') %>
        </div>
        <div class="growth-center" v-show="showuseravatarr">
            <div class="growth-center-top">
                <div class="personal-box-Avatar">
                    <div class="Avatar">
                        <% if(userbasicinfo.avatar) { %>
                            <img src="<%= userbasicinfo.avatar %>" alt=""  id="img1" >
                        <% }else{ %>
                            <img src="/image/avatar.png" alt=""  id="img1" >
                        <% } %>
                        <!-- <img src="/mimage/avatar.png" alt="" id="img1" v-if="'<%= userbasicinfo.avatar %>' == ''">
                        <img src="<%= userbasicinfo.avatar %>" id="img1" alt="" v-else-if="'<%= userbasicinfo.avatar %>' != ''"> -->
                        <label for="changeuseravatar">
                            <i class="icon iconfont icon-xiangji i-con" @click="showuseravatar=true,showuseravatarr=false" id="inputImagee"></i>
                       </label>
                    </div>
                </div>
                <div class="growth-center-UserInfo">
                    <div class="information">
                        <span class="information-name"><%= __('userName') %></span>
                        <span class="information-content" v-show="this.changeunamenum==0" v-html="username==''?'<%= userbasicinfo.nickname %>':username">
                        </span>
                        <span class="information-content" v-show="this.changeunamenum==1">
                            <input type="text" class="changeuname" v-model="newusername">
                        </span>
                    </div>
                    <div class="information">
                        <span class="information-name"><%= __('email') %></span>
                        <span class="information-content">
                            <%= userbasicinfo.email %>
                        </span>
                    </div>
                    <div class="information">
                        <span class="information-name">UID:</span>
                        <span class="information-content">
                            <%= userbasicinfo.id %>
                        </span>
                    </div>
                    <div class="information">
                        <span class="information-name"><%= __('createAt') %></span>
                        <span class="information-content">{{getTime(<%= userbasicinfo.registerTime %>)}}</span>
                    </div>
                    <div class="information centerr">
                        <button class="modify" @click="changeusername()" v-show="this.changeunamenum==0"><%= __('modify') %></button>
                        <button class="modify" @click="changeunamenum=0" v-show="changeunamenum==1"><%= __('cancel') %></button>
                        <button class="modify" @click="changeusername()" v-show="this.changeunamenum==1"><%= __('confirm') %></button>
                   </div>
                </div>
            </div>     
            <div class="growth-bottom">
                <div class="growth-top"><%= __('modifypwd') %></div>
                <div class="growth-bottom-center">
                        <div class="modifypwd_wrap">
                                <div>
                                    <span class="sign"><%= __('securityEmail') %></span>
                                    <span style="font-size:16px;color:#515151" class="signone">
                                        <%= userbasicinfo.email %>
                                    </span>
                                </div>
                                <div class="sign-box">
                                  <span class="sign"><%= __('verificationCode') %></span>
                                    <div class="emailsend" id="emailsend">
                                        <input type="text" id="inputs" class="input sencode" placeholder="<%= __('inputemailcode') %>" ref="oldpassword" v-model="old">
                                        <button type="button" id="emailsendNumber" class="emailsendNumber" @click="sendcode" :disabled="isfalse">
                                                <%= __('sendOut') %>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <span class="sign"><%= __('oldPassword') %></span>
                                    <input type="password" placeholder="<%= __('originalPassword') %>" ref="newpassword" v-model="newp">
                                </div>
                                <div>
                                    <span class="sign"><%= __('reNewpassword') %></span>
                                    <input type="password" placeholder="<%= __('inputreNewpassword') %>" ref="Confirmnewpassword" v-model="Confirmnew">
                                </div>
                                <div class="centerr">
                                    <button class="modifybtnn" @click='updatepassword()'><%= __('confirmChange') %></button>
                                </div>
                        </div>
                </div>
                <div class="centerr">
                        <button class="centerr-box" @click='signout()'><%= __('signOut') %></button>
                </div>
            </div>
        </div>
        <!-- 修改图片盒子 -->
        <div class="useravatarbox" v-show="showuseravatar">
            <div class="useravatarbox-container img-container">
                <% if(userbasicinfo.avatar) { %>
                    <img src="<%= userbasicinfo.avatar %>" id="image" alt="">
                <% }else{ %>
                    <img src="/image/avatar.png" id="image" alt="">
                <% } %>
                 <!-- <img src="/mimage/avatar.png" alt="" id="image" v-if="'<%= userbasicinfo.avatar %>' == ''">
                <img src="<%= userbasicinfo.avatar %>" id="image" alt="" v-else-if="'<%= userbasicinfo.avatar %>' != ''"> -->
            </div>
            <div class="groupgg"> 
                <div class="groupggg">                                     
                        <!-- <div class="btn-group fl fl-fl">
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" name="btn1">
                                    <span class="fa fa-rotate-left" id="fa-rotate-left"></span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" name="btn2">
                                    <span class="fa fa-rotate-right" id="fa-rotate-right"></span>
                            </button>
                        </div>
                        <div class="btn-group fl posa-div">
                            <button type="button" class="btn" data-method="reset" name="btn3">
                                    <span class="fa fa-refresh posa" id="reset"></span>
                            </button>
                            <label class="docs-tooltipP" for="inputImage">
                                    <input type="file" id="inputImage" style="visibility:hidden;" name="file" size="100" name="file" onchange="selectImage(this.files)" />
                                    <span class="fa fa-upload btn inputImage"></span>
                            </label>

                        </div>
                        <div class="btn-secondary fl"> 
                            <button type="button" class="btn-secondary" id="getData" data-method="getData" data-option data-target="#putData"  name="btn6">
                                <span class="docs-tooltip btnn fl" data-toggle="tooltip" data-animation="false" title="">
                                        <%= __('confirm') %>
                                </span>
                            </button>
                        </div> -->
                        <div class="btn-group">
                                <button type="button" class="btn" data-method="rotate" data-option="-45" name="btn1">
                                        <span class="fa fa-rotate-left" id="fa-rotate-left"></span>
                                </button>
                                <button type="button" class="btn" data-method="rotate" data-option="45" name="btn2">
                                        <span class="fa fa-rotate-right" id="fa-rotate-right"></span>
                                </button>
                                <button type="button" class="btn" data-method="reset" name="btn3">
                                        <span class="fa fa-refresh posa" id="reset"></span>
                                </button>
                                <label class="btn posr" for="inputImage">
                                        <input type="file" id="inputImage" style="visibility:hidden;" name="file" size="100" name="file" onchange="selectImage(this.files)" />
                                        <span class="fa fa-upload btn inputImage"></span>
                                </label>
                                <button type="button" class="btnn" id="getData" data-method="getData" data-option data-target="#putData"  name="btn6">
                                            <%= __('confirm') %>
                                </button>
                        </div>
                </div> 
            </div>          
        </div>
    </div>
    <!-- v-show="false" -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/cropper.js"></script>
    <script src="/mjs/main.js"></script>
    <script src="/mjs/personal.js"></script> 
</body>
</html>